<style>
    .statistic-card{
        padding: 15px;
    }

</style>

<script type="text/html" id="tpl-object-chart">
    <div style="padding: 20px;">
        <!-- <button id="select_date_btn">选择日期</button> -->

        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-inline" id="data_select_tool">
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div class="layui-panel statistic-card">
                    <span class="statistic-card-title"></span>
                    <div class="statistic-card-body-number" style="height: 300px;" id="topic_day">
                        --
                    </div>
                </div>
            </div>
        </div> -->
        
        <div class="layui-row layui-col-space10 ">
            <div class="layui-col-md7">
                <div class="layui-panel statistic-card">
                    <!-- <span class="statistic-card-title"></span> -->
                    <div class="statistic-card-body-number" style="height: 300px;" id="pieChartTopic">
                        --
                    </div>
                </div>
            </div>
            <div class="layui-col-md5">
                <div class="layui-panel statistic-card">
                    <!-- <span class="statistic-card-title"></span> -->
                    <div class="statistic-card-body-number" style="height: 300px;" id="eventStatistics">
                        --
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div class="layui-panel statistic-card">
                    <!-- <span class="statistic-card-title"></span> -->
                    <div class="statistic-card-body-number" style="height: 300px;" id="topic_month">
                        --
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="layui-row layui-col-space10 ">
            <div class="layui-col-md7">
                <div class="layui-panel statistic-card">
                    <span class="statistic-card-title">近15天文章发布统计</span>
                    <div class="statistic-card-body-number" style="height: 300px;" id="week_line">
                        --
                    </div>
                </div>
            </div>
            <div class="layui-col-md5">
                <div class="layui-panel statistic-card">
                    <span class="statistic-card-title">最新发布</span>
        
                    <div class="statistic-card-body">
                        <table class="layui-table" lay-even lay-skin="nob">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>标题</th>
                                    <th>发布时间</th>
                                    <th>作者</th>
                                </tr>
                            </thead>
                            <tbody id="latest_articles">
                                <tr>
                                    <td>--</td>
                                    <td>--</td>
                                    <td>--</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> -->
    </div>

    <!-- <script type="text/html" id="date_select">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-inline" id="data_select_tool">
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script> -->
    
    
</script>

<script src="/static/echarts/echarts.min.js"></script>


<script type="text/javascript">
    app.base.loadApi("apiObject")
    app.defTpl('objectChart', function (tplArg) {
        layui.use(['layer', 'jquery',"table","apiObject","laydate","form"], function () {
            var $ = layui.jquery,table=layui.table, apiObject=layui.apiObject
                , layer = layui.layer, laydate=layui.laydate, form=layui.form;

            var echartsItem={};
            
            var start_time="2021-05-01 00:00:00",end_time="2022-12-31 00:00:00";

            // app.runTpl("object_event_subject", { objId: 1 })
            app.base.layer({
                title: "图表",
                // area: [800, 500],
                area: ["80%", 750],
                maxmin: true, //开启最大化最小化按钮
                restore: function (layero, index) {
                    for (const key in echartsItem) {
                        if (Object.hasOwnProperty.call(echartsItem, key)) {
                            const element = echartsItem[key];
                            element.resize()
                        }
                    }
                } ,
                full: function (layero, index) {
                    for (const key in echartsItem) {
                        if (Object.hasOwnProperty.call(echartsItem, key)) {
                            const element = echartsItem[key];
                            element.resize()
                        }
                    }
                },
                type:1,
                content: $('#tpl-object-chart').html(),
                success:function(){
                    table.render({
                        elem: '#object_event_subject_table'
                        , url: '/objectapi/getSubjectListByObjId?obj_id=' + tplArg.objId
                        , cols: [[
                            { field: 'title', title: '标题' }
                            , { fixed: 'right', title: '操作',width:80, toolbar: '#object_event_subject_table_bar'}
                        ]]
                        , skin:"nob"
                        // , size:"sm"
                    });

                    // // 添加按钮
                    // $("#select_date_btn").click(function(){
                    //     openDateSelect()
                    // })


                    function topic_day(postdata){
                        var legend=[];
                        app.base.ajaxPost("/objectecharts/lineDayTopicCount",postdata,function(data){
                            var series=[];
                            for (let i = 0; i < data.topics.length; i++) {
                                const element = data.topics[i];
                                series[i]={}
                                series[i]['name'] = element
                                series[i]['data'] = data.datas[element]
                                series[i]['type'] = 'line'
                                series[i]['stack'] = 'Total'
                            }
                            option = {
                                title: {
                                    text: '主题统计/日'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: data.topics
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: data.dates
                                },
                                yAxis: {
                                    type: 'value',
                                    minInterval: 1
                                },
                                series: series
                            };
                            renderEcharts(option, 'topic_day')
                        })
                        
                    }

                    function topic_month(postdata) {
                        var legend = [];
                        app.base.ajaxPost("/objectecharts/lineTopicCount", postdata, function (data) {
                            var series = [];
                            for (let i = 0; i < data.topics.length; i++) {
                                const element = data.topics[i];
                                console.log(element)
                                series[i] = {}
                                series[i]['name'] = element
                                series[i]['data'] = data.datas[element]
                                series[i]['type'] = 'line'
                                // series[i]['stack'] = 'Total'
                            }
                            option = {
                                title: {
                                    text: '事件主题/(月/天)',
                                    subtext: '注：当日期范围大于31天，将按月统计',
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: data.topics
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: data.dates
                                },
                                yAxis: {
                                    type: 'value',
                                    minInterval: 1
                                },
                                series: series
                            };
                            renderEcharts(option, 'topic_month')
                        })

                    }


                    // 事件统计
                    function eventStatistics(data) {
                        
                            var xdataValue=[];
                            var value=[];
                            for (let i = 0; i < data.length; i++) {
                                const element = data[i];
                                xdataValue[i]= element.name;
                                value[i]= element.value;
                            }
                            option = {
                                title: {
                                    text: '事件主题/次'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: xdataValue,
                                    axisLabel: {
                                        // 旋转角度
                                        rotate: 45
                                    }
                                },
                                yAxis: {
                                    type: 'value',
                                    minInterval: 1
                                },
                                label: { //柱体上显示数值
                                    show: true,//开启显示
                                    position: 'top',//在上方显示
                                    textStyle: {//数值样式
                                        fontSize: '25px',
                                        color: '#666',
                                    },
                                    formatter: '{c}',
                                },
                                series: [
                                    {
                                        data: value,
                                        type: 'bar'
                                    }
                                ]
                            };
                            renderEcharts(option, 'eventStatistics')
                    }


                    function picChartTopic(postdata) {
                        app.base.ajaxPost("/objectecharts/pieChartTopic", postdata, function (data) {
                            option = {
                                title: {
                                    text: '事件主题/占比',
                                    subtext: postdata["start_time"].slice(0, 10)+" ~ "+ postdata["end_time"].slice(0, 10),
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left'
                                },
                                label: {
                                    //echarts饼图内部显示百分比设置
                                    show: true,
                                    formatter: '{d}%',
                                    color: "#000", //颜色
                                    fontSize: 12 //字体大小
                                },
                                series: [
                                    {
                                        // name: 'Access From',
                                        type: 'pie',
                                        radius: '50%',
                                        data: data,
                                        // data: [
                                        //     { value: 1048, name: 'Search Engine' },
                                        //     { value: 735, name: 'Direct' },
                                        //     { value: 580, name: 'Email' },
                                        //     { value: 484, name: 'Union Ads' },
                                        //     { value: 300, name: 'Video Ads' }
                                        // ],
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            renderEcharts(option, 'pieChartTopic')

                            eventStatistics(data);// 条形图
                        })
                        
                    }

                    function renderEcharts(option,elemId){
                        // $("#"+ elemId).html("--")
                        var myChart = echarts.init(document.getElementById(elemId));
                        option && myChart.setOption(option);
                        echartsItem[elemId]= myChart
                        // myChart.resize()
                    }
                    
                    function openDateSelect(){
                        layer.open({
                            title: "选择日期",
                            area: [400, 500],
                            type: 1,
                            content: $('#date_select').html(),
                            success: function () {
                                form.render()
                                laydate.render({
                                    elem: '#data_select_tool'
                                    //设置开始日期、日期日期的 input 选择器
                                    //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                                    , range: ['#test-startDate-1', '#test-endDate-1']
                                    ,done:function(value, date, endDate){
                                        start_time= date.year+'-'+ (date.month.lenth!=2?0+""+ date.month: date.month)+'-'+ (date.date.lenth != 2 ? 0 + "" + date.date : date.date) +" 00:00:00"
                                        end_time = endDate.year + '-' + (endDate.month.lenth != 2 ? 0 + "" + endDate.month : endDate.month) + '-' + (endDate.date.lenth != 2 ? 0 + "" + endDate.date : endDate.date) +" 23:59:59"
                                        start()
                                    }
                                });
                            }
                        })
                    }

                    function startRenderEcharts(){
                        var postdata = {};
                        postdata["start_time"] = start_time;
                        postdata["end_time"] = end_time;
                        postdata["obj_id"] = tplArg.objId;
                        // topic_day(postdata)
                        picChartTopic(postdata)
                        topic_month(postdata)
                        // openDateSelect()
                        // eventStatistics(postdata)
                    }

                    function GetDateStr(AddDayCount) {
                        var dd = new Date();
                        dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期  
                        var y = dd.getFullYear();
                        var m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1);//获取当前月份的日期，不足10补0  
                        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();//获取当前几号，不足10补0  
                        return y + "-" + m + "-" + d;
                    }  
                    

                    form.render()
                    laydate.render({
                        elem: '#data_select_tool'
                        //设置开始日期、日期日期的 input 选择器
                        //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                        , range: ['#test-startDate-1', '#test-endDate-1']
                        , done: function (value, date, endDate) {
                            start_time = date.year + '-' + (date.month <10 ?'0' + "" + date.month : date.month) + '-' + (date.date <10 ? '0' + "" + date.date : date.date) + " 00:00:00"
                            end_time = endDate.year + '-' + (endDate.month <10 ? '0' + "" + endDate.month : endDate.month) + '-' + (endDate.date <10 ? '0' + "" + endDate.date : endDate.date) + " 23:59:59"
                            startRenderEcharts()
                        }
                    });

                    start_time=GetDateStr(-180)
                    end_time= GetDateStr(0)
                    $("#test-startDate-1").val(start_time)
                    $("#test-endDate-1").val(end_time)
                    startRenderEcharts()
                }
            })


           
        })

    })
    
</script>